<template>
<div class="wrapper">
    <!-- :options="swiperOption" -->
     <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="(page,index) of pages" :key="index" >
        <div class="iconWrapper" v-for="item of page" :key="item.id">
    <div class="iconItem">
        <div class="icon-content" >
    <img  class="icon-img" :src="item.imgUrl"/>
        </div>
    <p class="icon-des">
        {{item.desc}}
    </p>
    </div>
    </div>
      </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
export default {
    name:'HomeIcons',
    data(){
        return{
       

        //   轮播图相关
      swiperOption:{

            loop : false,//可选选项，开启循环

       }
    }
    },

    props:{
        list:Array
    },


    // 计算属性
    computed:{
        pages(){
            const pages = [];
            this.list.forEach((element,index) => {
                //返回小于或等于某个数的整数
                const page = Math.floor(index/8);

                if(!pages[page])
                {
                    //如果大数组对用的下标元素为空则赋予空数组
                    pages[page]= [];
                }
                pages[page].push(element);

            });
            return pages;
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'  
@import '~styles/mixins.styl'
.wrapper{
    width :100%;
    height: 0px;
    background-color :#fff;
    padding-bottom :50%;

}
.iconItem{
position: relative;

 overflow :hidden;
  width :25%;
  height :0;
  padding-bottom :25%;
  float left;
  

}
.icon-content{
    position absolute;
    top: 0
    left: 0
    right: 0
    bottom: .44rem
    box-sizing: border-box
     padding: .1rem
     border-radius:5px;

}
.icon-img{
    display block;
     margin: 0 auto
    height: 100%
}
.icon-des{
  position absolute;
  height: .44rem
  left 0
  right 0
  bottom 0
  text-align center
  color $darkTextColor;
  ellipsis()
}


</style>